<template>
	<view>
		<view class="navBar">
			<view class=""></view>
			<view class="navBarTop">
				<view class="left" @tap="back">
					<image src="/static/img/index/24.png" mode="widthFix"></image>
				</view>
				墙墙详情
				<view class="center">
					<slot name="center"></slot>
				</view>
				<view class="right">
					<slot name="right"></slot>
				</view>
			</view>
		</view>
		<cover-view class="hongbao_jifen" v-if="!isTimer">
			<cover-image v-if="secondaryCountdown!=0" class="hongbaos_imgs"
				src="../../static/img/hongbao_loading.gif"></cover-image>
			<cover-view v-if="secondaryCountdown!=0" class="hongbaos_text_wrap">
				<cover-view>{{countdown}}s</cover-view>
			</cover-view>
			<cover-image v-else class="hongbaos_imgs" src="../../static/img/hongbao_open.png"></cover-image>
		</cover-view>
		<view class="main">
			<view class="wrap">
				<view class="upWrap">
					<image class="header"
						:src="queryUserHomeResponse.avatar?`${httpUrl}/app/file/viewFile?fileId=${queryUserHomeResponse.avatar}`:'../../static/img/userImg.png'">
					</image>
					<view class="userInfo">
						<view class="userName">{{queryUserHomeResponse.userName}}</view>
						<view class="userTime">发布于{{appUserTrends.createTime}}</view>
					</view>
					<view class="follow">
						<view v-if="queryUserHomeResponse.flagFollow=='FOLLOW'" @tap="toOrFollow" class="beFollow">
							<text
								style="color: #6B64D3;font-size: 26rpx;font-weight: bold;margin-left: 5rpx;">已关注</text>
						</view>
						<view v-else @tap="toOrFollow" class="toFollow">
							<image style="width: 24rpx;height: 24rpx;" src="../../static/img/plus.png"></image>
							<text style="color: #fff;font-size: 26rpx;font-weight: bold;margin-left: 5rpx;">关注</text>
						</view>
					</view>
				</view>
				<view class="middleWrap">
					<view class="middleTitle">{{appUserTrends.title}}</view>
					<view class="textWrap" >
						{{appUserTrends.content}}
						<!-- <textarea disabled style="width: 100%;" v-model="appUserTrends.content"></textarea> -->
					</view>
					<view v-if="appUserTrends.fileType=='PICTURE'" class="imgWrap">
						<image @tap="previewImage(n)" class="img" :style="{  
						    width: appUserTrends?.attachmentIds?.split(',').length === 1  
						      ? '100%'  
						      : appUserTrends?.attachmentIds?.split(',').length === 2  
						        ? '45%'  
						        : '210rpx',
									height:appUserTrends?.attachmentIds?.split(',').length >2?'210rpx':'auto' 
						  }" :mode="appUserTrends?.attachmentIds?.split(',').length >2?'aspectFill':'widthFix'"
							v-for="(m, n) in (appUserTrends?.attachmentIds || '').split(',')" :key="n"
							:src="`${httpUrl}/app/file/viewFile?fileId=${m}`"></image>
					</view>
					<view v-if="appUserTrends.fileType=='VIDEO'" class="imgWrap">
						<view class="videoWraps">
							<video class="video" objectFit="contain"
								:style="{height: Number(appUserTrends.attachFiles[0].height / appUserTrends.attachFiles[0].width * 340).toFixed(0) + 'rpx'}"
								:poster="`${httpUrl}/app/file/viewFile?fileId=${appUserTrends.attachmentIds}&process=video/snapshot,t_1000,f_jpg,w_${appUserTrends.attachFiles[0].width},h_${appUserTrends.attachFiles[0].height},m_fast`"
								:src="`${httpUrl}/app/file/viewFile?fileId=${appUserTrends.attachmentIds}`"></video>
						</view>
					</view>
				</view>
				<view class="downWrap">
					<view @tap="share" class="fenxiang">
						<image class="fenxiangImg" src="../../static/img/upload-2.png"></image>
						<text class="fenxiangText">分享</text>
					</view>
					<view v-if="appUserTrends.attachFiles.length>0" @tap="xiazai" class="fenxiang"
						style="position: relative;">
						<image class="fenxiangImg" src="../../static/img/xiazai.png"></image>
						<text class="fenxiangText">下载</text>
						<text v-if="appUserTrends.percent>0" style="position: absolute;right: -50rpx;">
							{{appUserTrends.percent}}%
						</text>
					</view>
					<view class="rightWrap">
						<image @tap="toPraises" v-if="flagPraise=='LIKE'" class="rightImg"
							src="../../static/img/dianzan.png">
						</image>
						<image @tap="toPraises" v-else class="rightImg" src="../../static/img/base-icon-like.png">
						</image>
						<text class="rightText">{{appUserTrends.praiseCount}}</text>
						<image @tap="toReward" class="rightImg" src="../../static/img/Frame 1321318967.png"></image>
						<text @tap="toReward" class="rightText">{{appUserTrends.rewardNum}}</text>
						<image @tap="goMore" class="rightImg" src="../../static/img/3-dots-horizontal .png"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="popups">
			<view class="popupMian">
				<view class="popupTop">
					<view>
						<text style="color: #262626;font-size: 36rpx;font-weight: bold;">评论</text>
						<text style="color: #8C8C8C;font-size: 28rpx;margin-left: 16rpx;">(共{{speakTotal}}条)</text>
					</view>
					<view>
						<text @tap="changeQueryType(index)" v-for="(item,index) in queryType"
							style="margin-right: 40rpx;" :key="index"
							:class="{beQueryType:queryTypeIndex==index}">{{item.name}}</text>
					</view>
				</view>
				<view class="speakAll" @scrolltolower="scrolltolowerOne">
					<view v-if="speakAll.length>0" v-for="(item,index) in speakAll" :key="index" class="speakBody">
						<view class="speakUserImg">
							<image class="speakUserImg"
								:src="item.avatar?`${httpUrl}/app/file/viewFile?fileId=${item.avatar}`:'../../static/img/userImg.png'">
							</image>
						</view>
						<view class="speakMian">
							<view class="speakName">{{item.userName}}</view>
							<view class="speakContent">{{item.commentsContent}}</view>
							<view class="speakInfo">
								<view>
									<text class="speakInfoText">{{item.intervalTime}}</text>
									<text class="speakInfoText"
										style="margin-left:8rpx;">{{item.commentsAddress}}</text>
									<text @tap="answer(item)" class="speakInfoTexts">回复</text>
								</view>
								<view class="imgWrap">
									<view class="imgWrap">
										<image @tap="toPraise(item)" v-if="item.flagLike=='LIKE'" class="img"
											src="../../static/img/dianzan.png">
										</image>
										<image @tap="toPraise(item)" v-else class="img"
											src="../../static/img/base-icon-like.png">
										</image>
										<text class="imgText">{{item.likeCount}}</text>
									</view>
									<view @tap="goReward('fu',item,index,0)" class="imgWrap">
										<image class="img" src="../../static/img/Frame 1321318967.png"></image>
										<text class="imgText">{{item.rewardNum}}</text>
									</view>
								</view>
							</view>
							<view v-if="item.expandFlag" v-for="(m,n) in item.queryTrendsCommentsReply" :key="n"
								class="speakBody">
								<view class="speakUserImg">
									<image class="speakUserImg"
										:src="m.avatar?`${httpUrl}/app/file/viewFile?fileId=${m.avatar}`:'../../static/img/userImg.png'">
									</image>
								</view>
								<view class="speakMian">
									<view class="speakName">{{m.userName}}</view>
									<view class="speakContent">{{m.commentsContent}}</view>
									<view class="speakInfo">
										<view>
											<text class="speakInfoText">{{m.intervalTime}}</text>
											<text class="speakInfoText"
												style="margin-left:8rpx;">{{m.commentsAddress}}</text>
										</view>
										<view class="imgWrap">
											<view class="imgWrap">
												<image @tap="toPraise(m)" v-if="m.flagLike=='LIKE'" class="img"
													src="../../static/img/dianzan.png">
												</image>
												<image @tap="toPraise(m)" v-else class="img"
													src="../../static/img/base-icon-like.png">
												</image>
												<text class="imgText">{{m.likeCount}}</text>
											</view>
											<view @tap="goReward('zi',m,index,n)" class="imgWrap">
												<image class="img" src="../../static/img/Frame 1321318967.png">
												</image>
												<text class="imgText">{{m.rewardNum}}</text>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view v-if="item.replyNum>0" class="toggleWrap">
								<view v-if="!item.expandFlag || item.replyNum > item.queryTrendsCommentsReply.length"
									@tap="toOpen(item)" class="leftLine"></view>
								<text v-if="!item.expandFlag || item.replyNum > item.queryTrendsCommentsReply.length"
									@tap="toOpen(item)"
									class="toggleText">展开{{item.pageNo>0&&item.expandFlag?'更多':item.replyNum+'条回复'}}</text>
								<image v-if="!item.expandFlag || item.replyNum > item.queryTrendsCommentsReply.length"
									@tap="toOpen(item)" class="moreImg" src="../../static/img/zhankai.png"></image>
								<view v-if="item.expandFlag" @tap="item.expandFlag=false" class="closeWrap">
									<text class="toggleText">收起</text>
									<image class="moreImgs" src="../../static/img/zhankai.png"></image>
								</view>
							</view>
						</view>
					</view>
					<view v-else
						style="width: 100%;height: 100rpx;display: flex;align-items: center;justify-content: center;">
						<text style="margin-top: 30rpx;">暂无评论</text>
					</view>
					<view v-if="isMore"
						style="width: 100%;height: 30rpx;display: flex;justify-content: center;margin-top: 10rpx;">
						<uni-load-more :status="moreText"></uni-load-more>
					</view>
				</view>
			</view>
			<view class="speakWrap">
				<view class="speak">
					<image @tap="querySpeak" class="speakImg" src="../../static/img/bi.png"></image>
					<input style="width: 100%;" cursor-spacing="15" v-model="speak" placeholder="说点什么吧～"
						placeholder-style="font-size:28rpx;color:#8C8C8C;margin-left:5rpx;" confirm-type="send"
						@confirm="querySpeak" />
				</view>
			</view>
		</view>
		<uni-popup ref="popupInput" type="bottom" border-radius="32rpx 32rpx 0 0">
			<view class="popups">
				<view class="speakWrap">
					<view class="speak">
						<image @tap="querySpeakTwo" class="speakImg" src="../../static/img/bi.png"></image>
						<input style="width: 100%;" cursor-spacing="15" focus v-model="speakTwo"
							:placeholder="placeholderUser"
							placeholder-style="font-size:28rpx;color:#8C8C8C;margin-left:5rpx;" confirm-type="send"
							@confirm="querySpeakTwo" />
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { onLoad, onPullDownRefresh, onShow, onPageScroll } from '@dcloudio/uni-app'
	import { ref, computed } from 'vue'
	import { queryUserTrendsInfo, saveOrDleTrendsPraise, saveFollow, getLogUrl, queryMyTrendsComments, queryMyTrendsReply, saveTrendsCommentsPraise, saveTrendsComments } from '@/utils/api/index.ts'
	import { useCounterStore } from '@/stores/counter';
	import {
		setDialogView
	} from '@/utils/dialogView.ts'
	const isTimer = ref(false)
	// 积分倒计时
	const counterStore = useCounterStore();
	const countdown = computed(() => counterStore.mainCountdown)
	const secondaryCountdown = computed(() => counterStore.secondaryCountdown)
	onPageScroll(() => {
		if (!isTimer.value) {
			counterStore.resetSecondaryAndResumeMain()
		}
	})
	const back = () => {
		uni.navigateBack()
	}
	const httpUrl = ref(getApp().globalData.baseUrl)
	// 点赞/取消
	const toPraises = async () => {
		const res = await saveOrDleTrendsPraise({ data: { trendsId: trendsId.value } })
		if (res.code == 200) {
			flagPraise.value = res.data.likeTypeEnum.value
			appUserTrends.value.praiseCount = res.data.appUserTrends.praiseCount
			if (res.data.redAmount > 0) {
				uni.showToast({
					title: `点赞成功!抢到${res.data.redAmount}个钻石红包`,
					icon: 'none'
				});
			} else {
				uni.showToast({
					title: res.data.msg,
					icon: 'none'
				});
			}
		}
	}
	// 下载
	const xiazai = () => {
		if (appUserTrends.value.fileType == 'VIDEO') {
			const downloadTask = uni.downloadFile({
				url: `${httpUrl.value}/app/file/viewFile?fileId=${appUserTrends.value.attachFiles[0].id}`,
				success: (res) => {
					if (res.statusCode === 200) {
						uni.saveVideoToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function () {
								uni.showToast({
									title: '下载成功',
									icon: 'none'
								});
								appUserTrends.value.percent = 0
							}
						});
					}
				}
			});
			downloadTask.onProgressUpdate((res) => {
				appUserTrends.value.percent = res.progress
			});
		}
		if (appUserTrends.value.fileType == 'PICTURE') {
			const imgList = appUserTrends.value.attachFiles.map((i : any) => {
				return `${httpUrl.value}/app/file/viewFile?fileId=${i.id}`
			})
			let num = 0
			imgList.map((it : string) => {
				uni.saveImageToPhotosAlbum({
					filePath: it,
					success: function () {
						num++
						appUserTrends.value.percent = (num / imgList.length * 100).toFixed(0)
						if (num == imgList.length) {
							uni.showToast({
								title: '下载成功',
								icon: 'none'
							});
							appUserTrends.value.percent = 0
						}
					}
				});
			})

		}
	}
	// 打赏
	const toReward = () => {
		uni.navigateTo({
			url: `/pages/qiangqiang/reward?id=${appUserTrends.value.id}`,
			animationType: 'slide-in-bottom',
			animationDuration: 250
		})
	}
	const goReward = (type : string, item : any, index : number, n : number) => {
		if (type == 'fu') {
			uni.navigateTo({
				url: `/pages/qiangqiang/reward?commentsId=${item.id}&id=${item.trendsId}&index=${index}`,
				animationType: 'slide-in-bottom',
				animationDuration: 250
			})
		} else {
			uni.navigateTo({
				url: `/pages/qiangqiang/reward?commentsId=${item.id}&id=${item.trendsId}&index=${index}&backIndexs=${n}`,
				animationType: 'slide-in-bottom',
				animationDuration: 250
			})
		}
	}
	// 预览图片  
	const previewImage = (n : number) => {
		const imgs = appUserTrends.value.attachmentIds.split(',');
		const imgList = imgs.map((item : any) => {
			return `${httpUrl.value}/app/file/viewFile?fileId=${item}`;
		});
		uni.previewImage({
			urls: imgList,
			current: n,
			longPressActions: {
				itemList: ['保存图片'],
				success: function (data) {
					uni.closePreviewImage()
					// 获取当前长按的图片 URL  
					const currentImageUrl = imgList[data.index];
					// 调用保存图片到相册的接口  
					uni.saveImageToPhotosAlbum({
						filePath: currentImageUrl,
						success: function () {
							uni.showToast({
								title: '保存成功',
								icon: 'none'
							});
						},
						fail: function (err) {
							console.error(err);
							uni.showToast({
								title: '保存失败',
								icon: 'none'
							});
						}
					});
				}
			}
		});
	};
	// 关注或取消关注用户
	const toOrFollow = async () => {
		const res = await saveFollow({ data: { userId: queryUserHomeResponse.value.userId } })
		if (res.code == 200) {
			queryUserHomeResponse.value.flagFollow = res.data
			uni.showToast({
				title: res.msg,
				icon: 'none'
			});
		}
	}
	// 分享
	const share = () => {
		uni.navigateTo({
			url: `/pages/qiangqiang/friendList?id=${trendsId.value}&areaType=${areaType.value}`,
			animationType: 'slide-in-bottom',
			animationDuration: 250
		})
	}
	// 跳转到帖子更多
	const goMore = (item : any, index : number) => {
		uni.navigateTo({
			url: `/pages/qiangqiang/more?id=${trendsId.value}`,
			animationType: 'slide-in-bottom',
			animationDuration: 250
		})
	}
	// 获取列表数据
	const appUserTrends = ref<any>({})
	const queryUserHomeResponse = ref<any>({})
	const queryTrendsCommentsList = ref<any>([])
	const flagPraise = ref('')
	const getList = async () => {
		const res = await queryUserTrendsInfo({ data: { trendsId: trendsId.value, areaType: areaType.value } })
		appUserTrends.value = res.data.appUserTrends
		queryUserHomeResponse.value = res.data.queryUserHomeResponse
		queryTrendsCommentsList.value = res.data.queryTrendsCommentsList
		flagPraise.value = res.data.flagPraise
	}
	// 显示/隐藏回复
	const toOpen = async (item : any) => {
		if (item.replyNum > item.queryTrendsCommentsReply.length) {
			item.pageNo++
			const data = {
				commentsId: item.id,
				pageNo: item.pageNo,
				pageSize: 10,
			}
			const res = await queryMyTrendsReply({ data: data })
			if (res.code == 200) {
				if (res.data.list.length > 0) {
					item.queryTrendsCommentsReply.push(...res.data.list)
				}
			}
		}
		item.expandFlag = true
	}
	// 评论点赞
	const toPraise = async (item : any) => {
		const res = await saveTrendsCommentsPraise({ data: { trendsCommentsId: item.id } })
		if (res.code == 200) {
			item.flagLike = res.data.type
			item.likeCount = res.data.likeCount
			uni.showToast({
				title: res.msg,
				icon: 'none'
			});
		}
	}
	// 一级评论
	const speak = ref('')
	const querySpeak = () => {
		const speaks = speak.value
		speak.value = ''
		setDialogView('ACCESS_FINE_LOCATION').then(res => {
			if (res == 1) {
				uni.getLocation({
					type: 'gcj02',
					geocode: 'true',
					success: async (e) => {
						const data = {
							appTrendsComments: {
								trendsId: trendsId.value,
								commentsContent: speaks,
								commentsAddress: e.address.province
							}
						}
						const res = await saveTrendsComments({ data: data })
						if (res.code == 200) {
							if (res.data.redAmount > 0) {
								uni.showToast({
									title: `评论成功！抢到${res.data.redAmount}个钻石红包`,
									icon: 'none'
								});
							} else {
								uni.showToast({
									title: `评论成功`,
									icon: 'none'
								});
							}
							pageNo.value = 1
							getLists(trendsId.value)
						}
					}
				})
			}
		})

	}

	// 一级触底加载
	const isMore = ref(false)
	const moreText = ref('loading')
	const scrolltolowerOne = async () => {
		isMore.value = true
		pageNo.value = pageNo.value + 1
		const data = {
			trendsId: trendsId.value,
			commentsUserId: null,
			queryType: queryType.value[queryTypeIndex.value].key,
			pageNo: pageNo.value,
			pageSize: 10
		}
		const res = await queryMyTrendsComments({ data: data })
		if (res.code == 200) {
			speakTotal.value = res.data.total
			if (res.data.list.length > 0) {
				speakAll.value.push(...res.data.list)
				isMore.value = false
			} else {
				moreText.value = 'no-more'
			}
		}
	}
	// 二级回复
	const popupInput = ref<InstanceType<typeof Popup> | null>(null)
	const placeholderUser = ref('')
	const commentsId = ref(0)
	const answer = (item : any) => {
		placeholderUser.value = ` 回复 @${item.userName}`
		commentsId.value = item.id
		popupInput.value.open('bottom')
	}
	const speakTwo = ref('')
	const querySpeakTwo = () => {
		const speaksTwo = speakTwo.value
		speakTwo.value = ''
		setDialogView('ACCESS_FINE_LOCATION').then(res => {

			if (res == 1) {
				uni.getLocation({
					type: 'gcj02',
					geocode: 'true',
					success: async (e) => {
						const data = {
							appTrendsComments: {
								trendsId: trendsId.value,
								commentsContent: speaksTwo,
								commentsAddress: e.address.province,
								commentsId: commentsId.value
							}
						}
						const res = await saveTrendsComments({ data: data })
						if (res.code == 200) {
							uni.showToast({
								title: '发送成功',
								icon: 'none'
							});
							pageNo.value = 1
							getLists(trendsId.value)
							popupInput.value.close()
						}
					}
				})
			}
		})

	}
	// 评论列表
	const speakAll = ref<any>([])
	const speakTotal = ref(0)
	const queryType = ref<any>([{
		name: '热评',
		key: 'HEAT'
	}, {
		name: '最新',
		key: 'FRESH'
	}])
	const queryTypeIndex = ref(0)
	const changeQueryType = async (index : number) => {
		pageNo.value = 1
		queryTypeIndex.value = index
		getLists(trendsId.value)
	}
	const pageNo = ref(1)
	const getLists = async (id : string) => {
		const data = {
			trendsId: id,
			commentsUserId: null,
			queryType: queryType.value[queryTypeIndex.value].key,
			pageNo: pageNo.value,
			pageSize: 10
		}
		const res = await queryMyTrendsComments({ data: data })
		if (res.code == 200) {
			speakTotal.value = res.data.total
			speakAll.value = res.data.list
			uni.stopPullDownRefresh()
		}
	}
	const trendsId = ref('')
	const areaType = ref('')
	onLoad((option) => {
		trendsId.value = option.id
		areaType.value = option.areaType
		isTimer.value = option.isTimer ? true : false;
		getList()
		getLists(option.id)
	})
	onShow(() => {
		uni.$once('refreshData', function () {
			getList()
			getLists(trendsId.value)
		})
	})
	// 下拉刷新
	onPullDownRefresh(() => {
		pageNo.value = 1
		getList()
		getLists(trendsId.value)
	})
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		position: relative;
		background: #fff;

		.wrap {
			width: 95%;
			margin-left: 2.5%;
			background: #fff;
			margin-top: 24rpx;
			position: relative;
			z-index: 2;
			border-bottom: 2rpx solid #F0F0F0;

			.upWrap {
				width: 95%;
				height: 128rpx;
				margin-left: 2.5%;
				display: flex;
				align-items: flex-end;

				.header {
					width: 96rpx;
					height: 96rpx;
					border-radius: 48rpx;
				}

				.userInfo {
					width: 400rpx;
					height: 96rpx;
					margin-left: 24rpx;

					.userName {
						width: 100%;
						height: 48rpx;
						color: #262626;
						font-size: 32rpx;
						font-weight: bold;
						display: flex;
						align-items: center;
					}

					.userTime {
						width: 100%;
						height: 48rpx;
						color: #8C8C8C;
						font-size: 28rpx;
						display: flex;
						align-items: center;
					}
				}

				.follow {
					width: 120rpx;
					height: 96rpx;
					margin-left: auto;
					display: flex;
					align-items: center;
					justify-content: center;

					.toFollow {
						width: 120rpx;
						height: 52rpx;
						border-radius: 26rpx;
						background: rgba(89, 83, 192, 1);
						color: #6B64D3;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.beFollow {
						width: 120rpx;
						height: 52rpx;
						border-radius: 26rpx;
						background: #E4E2FC;
						border: 2rpx solid #CAC5FA;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}

			.middleWrap {
				width: 95%;
				margin-left: 2.5%;

				.middleTitle {
					font-weight: bold;
					font-size: 32rpx;
					height: 30rpx;
					width: 100%;
					margin-top: 15rpx;
					align-items: center;
				}

				.textWrap {
					width: 100%;
					margin-top: 20rpx;
					margin-bottom: 20rpx;
					white-space: pre-wrap;
					color: #262626;
					font-size: 28rpx;
				}

				.imgWrap {
					width: 100%;
					margin-left: 0;
					display: flex;
					flex-wrap: wrap;
					position: relative;

					.img {
						margin-right: 14rpx;
						margin-bottom: 14rpx;
					}

					.videoWraps {
						width: 100%;
						display: flex;
						justify-content: center;

						.video {
							width: 680rpx;
							background: #000;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}

				}
			}

			.downWrap {
				width: 95%;
				height: 112rpx;
				margin-left: 2.5%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.fenxiang {
					width: 104rpx;
					height: 48rpx;
					display: flex;
					align-items: center;

					.fenxiangImg {
						width: 36rpx;
						height: 36rpx;
					}

					.fenxiangText {
						color: #8C8C8C;
						font-size: 24rpx;
						margin-left: 8rpx;
					}
				}

				.rightWrap {
					width: 410rpx;
					height: 48rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					.rightImg {
						width: 36rpx;
						height: 36rpx;
						margin-left: 8rpx;
					}

					.rightText {
						color: #8C8C8C;
						font-size: 24rpx;
						margin-left: 8rpx;
					}
				}
			}
		}
	}

	.popups {
		width: 100%;
		min-height: 80vh;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		position: relative;
	}

	.popupMian {
		width: 94%;
		margin-left: 3%;
		position: relative;
	}

	.popupTitle {
		width: 100%;
		height: 96rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.popupTop {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.beQueryType {
		color: #5c57c4;
		font-weight: bold;
	}

	.speakWrap {
		width: 100%;
		height: 98rpx;
		border-top: 2rpx solid #F0F0F0;
		display: flex;
		align-items: center;
		background: #fff;
		position: fixed;
		bottom: 0;
	}

	.speak {
		width: 94%;
		height: 64rpx;
		margin-left: 3%;
		background: #F5F5F5;
		border-radius: 32rpx;
		display: flex;
		align-items: center;
	}

	.speakImg {
		width: 22rpx;
		height: 22rpx;
		margin-left: 25rpx;
		margin-right: 21rpx;
	}

	.speakAll {
		width: 100%;
		margin-bottom: 98rpx;
	}

	.speakBody {
		width: 100%;
		display: flex;
		margin-top: 32rpx;
	}

	.speakUserImg {
		width: 64rpx;
		height: 64rpx;
		border-radius: 32rpx;
		margin-right: 16rpx;
	}

	.speakName {
		color: #8C8C8C;
		font-size: 24rpx;
	}

	.speakContent {
		color: #262626;
		font-size: 28rpx;
		line-height: 42rpx;
		margin-top: 12rpx;
	}

	.speakInfo {
		margin-top: 12rpx;
		display: flex;
		justify-content: space-between;
	}

	.speakInfoText {
		color: #8C8C8C;
		font-size: 24rpx;
	}

	.speakInfoTexts {
		margin-left: 32rpx;
		color: #595959;
		font-size: 24rpx;
	}

	.imgWrap {
		display: flex;
		align-items: center;
		margin-left: 20rpx;
	}

	.img {
		width: 30rpx;
		height: 30rpx;
	}

	.imgText {
		font-size: 24rpx;
		color: #8C8C8C;
		margin-left: 5rpx;
	}

	.toggleWrap {
		display: flex;
		align-items: center;
		margin-top: 32rpx;
		margin-bottom: 20rpx;
	}

	.leftLine {
		width: 48rpx;
		height: 0rpx;
		border-bottom: 2rpx solid #E5E5E5;
	}

	.toggleText {
		color: #595959;
		font-size: 24rpx;
		margin-left: 18rpx;
		margin-right: 10rpx;
	}

	.moreImg {
		width: 30rpx;
		height: 30rpx;
	}

	.moreImgs {
		width: 30rpx;
		height: 30rpx;
		transform: rotate(-90deg);
	}

	.closeWrap {
		margin-left: 20rpx;
		display: flex;
		align-items: center;
	}

	.navBar {
		>view:nth-of-type(1) {
			height: var(--status-bar-height);
		}
	}

	.navBarTop {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		height: 88rpx;
		// margin-top: 28rpx;
		padding-top: 28rpx;
		color: #333333;
		background: #fff;
		z-index: 9;

		.left {
			position: absolute;
			left: 32rpx;
			height: 88rpx;
			display: flex;
			align-items: center;

			image {
				width: 36rpx;
			}
		}

		.right {
			display: flex;
			align-items: center;
			height: 88rpx;
			position: absolute;
			right: 32rpx;
		}
	}

	// 悬浮红包积分
	.hongbao_jifen {
		position: fixed;
		bottom: 20px;
		left: 20px;
		width: 75px;
		height: 75px;
		z-index: 999;
	}

	.hongbaos_imgs {
		width: 75px;
		height: 75px;
		position: absolute;
		left: 0;
		top: 0;
	}

	.hongbaos_text_wrap {
		color: #fff;
		position: absolute;
		width: 75px;
		top: 60%;
		font-size: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>